<template>
    <div class="wxc-minibar" :style="{ backgroundColor: backgroundColor }" v-if="show">
        <div class="left" @click="leftButtonClicked" aria-label="返回" :accessible="true">
            <slot name="left">
                <image :src="leftButton"
                       v-if="leftButton"
                       class="left-button"></image>
            </slot>
        </div>
        <slot name="middle">
            <text class="middle-title" :style="{ color: textColor }">{{title}}</text>
        </slot>
        <div class="right" @click="rightButtonClicked">
            <slot name="right">
                <image v-if="rightButton"
                       class="right-button"
                       :src="rightButton"
                       :aria-hidden="true"></image>
            </slot>
        </div>
    </div>
</template>

<style scoped>
    .wxc-minibar {
        width: 750px;
        height: 90px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #d81e06;
        z-index: 100;
    }

    .left {
        width: 180px;
        padding-left: 32px;
    }

    .middle-title {
        font-size: 30px;
        color: #ffffff;
        height: 36px;
        line-height: 34px;
    }

    .right {
        width: 180px;
        padding-right: 32px;
        align-items: flex-end;
    }

    .left-button {
        width: 21px;
        height: 36px;
    }

    .right-button {
        width: 32px;
        height: 32px;
    }

    .icon-text {
        font-size: 28px;
        color: #666666;
    }
</style>

<script>
    import {left_icon, search_icon} from '../../baseConfig';
    const modal = weex.requireModule('modal');
    export default {
        props: {
            backgroundColor: {
                type: String,
                default: '#d81e06'
            },
            leftButton: {
                type: String,
                default: left_icon
            },
            textColor: {
                type: String,
                default: '#3D3D3D'
            },
            rightButton: {
                type: String,
                default: search_icon
            },
            title: {
                type: String,
                default: ''
            },
            show: {
                type: Boolean,
                default: true
            },
            userLeft:{
                type: Boolean,
                default: false
            }
        },
        methods: {
            leftButtonClicked () {
                const self = this;
                if(this.userLeft){
                    self.$emit('wxcMinibarLeftButtonClicked', {});
                }else{
                    self.$router.go(-1);
                }
            },
            rightButtonClicked () {
                const self = this;
                self.$emit('wxcMinibarRightButtonClicked', {});
            }
        }
    };
</script>
